<template>
	<view class="content">
		<view class="login-view">
			<view class="title-view">
				<view class="title">{{title}}</view>
				<view class="subtitle">{{subtitle}}</view>
			</view>
			<view class="login">
				<view class="t10">
					<input class="d_input" v-model="form.userName" placeholder="请输入用户名"/>
				</view>
				<view class="t10" style="margin-top: 30px;">
					<input class="d_input" type="password" v-model="form.password" placeholder="请输入密码" style="background:none;"/>
				</view>
				<view class="t10" style="margin-top: 30px;">
					 <button class="btn" type="primary" @click="login">登录</button>
				</view>
				<view style="text-align: right;margin-right: 10px;color: #356fee;margin-top: 20px;">
					 <span @click="showforget('center')">忘记密码？ </span>
				</view>
			</view>
		</view>
		
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="forget">
						<view class="p-title">忘记密码</view>
						<view class="p-content">
							<view>请联系系统管理员协助处理。</view>
							<view>
								<button class="btn" type="primary" @click="closeforget">关闭</button>
							</view>
						</view>
						
					</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curRoute: '/pages/index/index',
				title:'黑灯工程设备管理系统',
				subtitle:'Dark light Engineering Equipment Management System',
				type: 'center',
				form:{
					userName: '',
					password: ''
				}
			}
		},
		onLoad(options) {
			this.checkLogin()
		},
		methods: {
			showforget(type){
				this.$refs.popup.open(type)
			},
			closeforget(type){
				this.$refs.popup.close()
			},
			checkLogin(){
				let token = this.common.getCache('token')
				if (token){
					let url='/api/user/info'
					this.common.getNotLoading(url,null,(res)=>{
						if(res.code==1){
							// 返回首页
							uni.switchTab({
								url: this.curRoute
							});
						}
					})
				}
			},
			login(){
				if (!this.form.userName){
					// console.info(this.app.globalData.text)
					this.common.showError('请输入用户名！')
					return
				}
				if (!this.form.password){
					this.common.showError('请输入密码！')
					return
				}
				let url = '/login?username='+this.form.userName+'&password='+this.form.password
				this.common.post(url,this.form,(res) =>{
					if (res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.common.setCache('token',res.data)
					
					// 返回首页
					uni.switchTab({
						url: this.curRoute
					});
				})
			}
		}
	}
</script>

<style>
	.login-view {
		height: 100vh;
		width: 100%;
		background-image: url('/static/login.png');
		background-size: cover;
	}
	.title-view{
		color: white;
		text-align: center;
	}

	.title {
		font-size: 30px;
		padding-top: 70px;
	}
	.subtitle{
		font-size: 12px;
		margin-top: 10px;
	}
	.login{
		margin-top: 320px;
		padding: 0px 30px;
	}
	
	.d_input{
		border: 0.33px solid #bfbfbf;
		border-radius: 24.33px;
		height: 50px;
		padding-left: 10px;
	}
	.forget{
		width: 70vw;
		background-image: url(/static/prop.png);
		background-size: cover;
		aspect-ratio: 1 / 1;
		border-radius: 20px;
	}
	.p-title{
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		padding-top: 20px;
	}
	.p-content{
		padding-top: 100px;
	}
	.p-content>view:first-child{
		    text-align: center;
		    font-weight: bold;
	}
	.p-content>view:last-child{
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: 50px;
		padding-bottom: 50px;
	}
	
</style>
